*{
  padding: 0;
  margin: 0;
}

$color1: #ff605b;
$color2: #00d2ff;
$color3: #fffd87;
$color4: #406ef4;
$color5: #013c30;
$color6: #08187d;

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
  perspective: 700px;
  section{
    position: relative;
    width: 300px;
    height: 200px;
    cursor: pointer;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
    &:hover{
      animation-play-state: paused;
    }
    div{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-box-reflect: below 10px -webkit-gradient(linear,left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.3)));
      img {
        width: 60px;
        height: 120px;
      }
    }
    div:nth-child(1){
      transform: translateZ(300px);
      background-color: $color1;
    }
    div:nth-child(2){
      transform: rotateY(60deg) translateZ(300px);
      background-color: $color2;
    }
    div:nth-child(3){
      transform: rotateY(120deg) translateZ(300px);
      background-color: $color3;
    }
    div:nth-child(4){
      transform: rotateY(180deg) translateZ(300px);
      background-color: $color4;
    }
    div:nth-child(5){
      transform: rotateY(240deg) translateZ(300px);
      background-color: $color5;
    }
    div:nth-child(6){
      transform: rotateY(300deg) translateZ(300px);
      background-color: $color6;
    }
  }
}

@keyframes rotate {
  0%{
    transform: rotateY(0);
  }
  100%{
    transform: rotateY(360deg);
  }
}

